import React from 'react';
import { Card, Typography } from 'antd';

const { Title, Paragraph } = Typography;

const LightingSuggestionDisplay = ({ suggestions }) => {
  return (
    <Card title="补光方案展示" style={{ marginTop: 20 }}>
      <div style={{ display: 'flex', gap: '20px' }}>
        <div style={{ flex: 1 }}>
          <Title level={4}>补光建议</Title>
          {suggestions?.map((suggestion, index) => (
            <Paragraph key={index}>{suggestion}</Paragraph>
          ))}
        </div>
        <div style={{ flex: 1 }}>
          <svg
            width="300"
            height="200"
            viewBox="0 0 300 200"
            style={{ border: '1px solid #eee' }}
          >
            {/* 主体物件（中心位置） */}
            <rect x="125" y="100" width="50" height="50" fill="#ccc" />
            
            {/* 补光灯（左上角45度） */}
            <circle cx="50" cy="50" r="15" fill="#FFD700" />
            
            {/* 光线方向指示 */}
            <defs>
              <marker
                id="arrowhead"
                markerWidth="10"
                markerHeight="7"
                refX="9"
                refY="3.5"
                orient="auto"
              >
                <polygon points="0 0, 10 3.5, 0 7" fill="#FFD700" />
              </marker>
            </defs>
            <line
              x1="60"
              y1="60"
              x2="125"
              y2="100"
              stroke="#FFD700"
              strokeWidth="2"
              strokeDasharray="5,5"
              markerEnd="url(#arrowhead)"
            />
            
            {/* 角度标注 */}
            <path
              d="M 50 100 A 50 50 0 0 1 85 65"
              fill="none"
              stroke="#999"
              strokeDasharray="2,2"
            />
            <text x="70" y="90" fill="#666" fontSize="12">45°</text>
            
            {/* 距离标注 */}
            <text x="80" y="40" fill="#666" fontSize="12">1米</text>
          </svg>
        </div>
      </div>
    </Card>
  );
};

export default LightingSuggestionDisplay;
